<template>
    <el-upload ref="upload" v-bind="$attrs" v-on="$listeners" 
          class="avatar-uploader"
          :action="$attrs.action" 
          :show-file-list="false"
          :auto-upload="$attrs.autoUpload"
          :accept="($attrs.accept ? $attrs.accept :accept)"
          :on-preview="handlePictureCardPreview" 
          :on-remove="handleRemove"
          :on-change="handProgress">
          <el-input v-model="fieldValue"  style="width: 70%; float: left; margin-right: 10px;display: none;"></el-input>
          <img v-if="imageUrl.length" :src="imageUrl[0].url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>
<script>
export default {
    name:'uploadAvatar',
    props: {
      value: {
        type: [String,Number],
        default() {
          return ''
        }
      },
      uploadText: {
        type: String,
        default: '点击上传'
      },
      selectText: {
        type: String,
        default: '选取文件'
      },
      submitText: {
        type: String,
        default: '上传到服务器'
      },
      tipText: {
        type: String,
        default: '只能上传jpg/png文件，且不超过500kb'
      },
      size: {
        type: String
      },
      imageUrl: {
        type: Array,
        default:()=>[]
      }
    },
    data(){
        return {
            accept:'.bmp,.jpg,.png,.tif,.gif,.pcx,.tga,.exif,.fpx,.svg,.psd,.cdr,.pcd,.dxf,.ufo,.eps,.ai,.raw,.WMF,.webp'
        }
    },
    computed:  {
      fieldValue: {
        get() {
          return this.value;
        },
        set(val) {
         
        }
      }
    },
    methods: {
        handlePictureCardPreview(file) {
            this.$emit('handlePictureCardPreview',file);
        },
        handleRemove(file,fileList){
            this.$emit('handleRemove',file,fileList);
        },
        handProgress(file, fileList){
            file.raw.flag = 1;
            this.$emit('handProgress',file,fileList);
        }
    }
}
</script>


<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>